<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="__PUBLIC__/css/font.css">
    <link rel="stylesheet" href="__PUBLIC__/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__PUBLIC__/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-body">
    <form class="layui-form">

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>门店
            </label>
            <div class="layui-input-inline">
                <input type="text" name="order_store" value="{$orders.order_store}" autocomplete="off" class="layui-input" lay-verify="order_store">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>餐桌
            </label>
            <div class="layui-input-inline">
                <input type="text" name="order_name" value="{$orders.order_name}"  autocomplete="off" class="layui-input" lay-verify="order_name">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>负责人
            </label>
            <div class="layui-input-inline">
                <select name="person_id" id="person_id" lay-verify="cate">
                    <foreach name="member" item="v" key="k">
                        <option value="{$v.id}">{$v.nickname}</option>
                    </foreach>

                </select>
                <!--<input type="text" name="person_name" value="{$orders.person_name}"  autocomplete="off" class="layui-input" lay-verify="person_name">-->
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>客户姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" name="customer_name" value="{$orders.customer_name}"  autocomplete="off" class="layui-input" lay-verify="customer_name">
            </div>
        </div>


        <div class="layui-form-item" style="display: none;">
            <label class="layui-form-label">
                <span class="x-red">*</span>订单总额
            </label>
            <div class="layui-input-inline">
                <input type="number" name="order_total" value="{$orders.order_total}"  autocomplete="off" class="layui-input" lay-verify="order_total">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>支付方式
            </label>
            <div class="layui-input-inline">
                <select name="order_pay" lay-verify="required">
                    <option value="待定" <if  condition="$orders['order_pay'] eq 待定"> selected </if>>待定</option>
                    <option value="支付宝" <if  condition="$orders['order_pay'] eq 支付宝"> selected </if>>支付宝</option>
                    <option value="微信" <if  condition="$orders['order_pay'] eq 微信"> selected </if>>微信</option>
                    <option value="刷卡消费" <if  condition="$orders['order_pay'] eq 刷卡消费"> selected </if>>刷卡消费</option>
                    <option value="现金" <if  condition="$orders['order_pay'] eq 现金"> selected </if>>现金</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>支付状态
            </label>
            <div class="layui-input-inline">
                <select name="is_pay" lay-verify="required">
                    <option value="待支付" <if  condition="$orders['is_pay'] eq 待支付"> selected </if>>待支付</option>
                    <option value="已支付" <if  condition="$orders['is_pay'] eq 已支付"> selected </if>>已支付</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>预约状态
            </label>
            <div class="layui-input-inline">
                <select name="reserve_state" lay-verify="required">
                    <option value="预约成功" <if  condition="$orders['reserve_state'] eq 预约成功"> selected </if>>预约成功</option>
                    <option value="预约失败" <if  condition="$orders['reserve_state'] eq 预约失败"> selected </if>>预约失败</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>预约时间
            </label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="预约时间" value="{$orders.reserve_time}" name="reserve_time" required="required" id="start">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>客户手机号
            </label>
            <div class="layui-input-inline" >
                <input type="text" value="{$orders.customer_mobile}" name="customer_mobile" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>人数
            </label>
            <div class="layui-input-inline">
                <input type="text" value="{$orders.order_num}" name="order_num" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>商家用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" value="{$orders.token}" name="token" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">选餐</label>
            <div class="layui-input-block">
                <foreach name="foods" item="v" key="k">
                <input type="checkbox" name="food_id[{$k}]" value="{$v.id}" title="{$v.name}">
                </foreach>
            </div>
        </div>


        <div class="layui-form-item">
            <label  class="layui-form-label">
            </label>
            <button  class="layui-btn" lay-filter="add" lay-submit="">
                添加
            </button>
        </div>
    </form>
</div>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start', //指定元素
            // max: 0,
            type: 'datetime'
        });

    });

    layui.use(['form','layer'], function(){
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            order_store: function(value){
                if(value.length <= 0){
                    return '门店不能为空';
                }
            },

            order_name: function(value){
                if(value.length <= 0){
                    return '餐桌不能为空';
                }
            },

            person_name: function(value){
                if(value.length <= 0){
                    return '负责人不能为空';
                }
            },

            customer_name: function(value){
                if(value.length <= 0){
                    return '客户姓名不能为空';
                }
            }



        });

        //监听提交
        form.on('submit(add)', function(data){
            // 获取 负责人姓名
            var person_name = $("#person_id option:selected").text();
            data.field.person_name = person_name;
            console.log(data);
            $.post("{:U('Order/store')}", data.field, function(resp) {
                if (resp.code == 0) {
                    layer.alert("添加成功", {icon: 6},function () {

                        parent.location.reload();
                    });
                } else {
                    layer.msg(resp.msg, function () { });
                }
            }, 'json')

            return false;
        });


    });
</script>

</body>

</html>